import '../css/home/ssi-uploader.min.css'
import '../vendor/ssi-uploader.min.js';

var token = $.cookie('token');
var mytoken = JSON.parse(token);
var React = require('react');
const InNewStocks = React.createClass({
    componentDidMount: function () {
        $('#add-img')
            .click(function () {
                if ($('#stage-goods-name').val() != "" && $('#stage-price').val() != "" && $('#stage-stock').val() != "" && $('#stage-details').val() != "" && $('#stage-category').val() != "" && $('#stage-describe').val() != "") {
                    $.ajax({
                        type: "Patch",
                        url: "/api/Goods/AddGoods",
                        headers: {
                            Authorization: "Bearer " + mytoken.access_token
                        },
                        data: JSON.stringify({
                            GoodsName: $('#stage-goods-name').val(),
                            Price: $('#stage-price').val(),
                            Stock: $('#stage-stock').val(),
                            Details: $('#stage-details').val(),
                            Category: $('#stage-category').val(),
                            Describe: $('#stage-describe').val()
                        }),
                        dataType: "json",
                        contentType: 'application/json',
                        success: function (data) {
                            if (data != null) {
                                $('#ssi-upload').ssi_uploader({
                                    url: 'http://localhost:27651/api/Goods/AddGoodsImages',
                                    data: {GoodsId:data},
                                    maxFileSize: 6,
                                    allowed: ['jpg', 'gif', 'txt', 'png', 'pdf']
                                });
                            }
                        },
                        error: function (msg) {
                            alert("出错了");
                        }
                    });

                }

            });

    },
    render() {
        return <div>
            <section className="content-header">
                <h1>
                    后台管理
                    <small>新货入库</small>
                </h1>
                <ol className="breadcrumb">
                    <li>
                        <a href="#">
                            <i className="fa fa-dashboard"></i>
                            Stage</a>
                    </li>
                    <li>
                        <a href="#">新货入库</a>
                    </li>
                    <li className="active">概览</li>
                </ol>
            </section>
            <br/>
            <div className="box">
                <div className="box-header with-border">
                    <h3 className="box-title">新货入库</h3>
                    <div className="box-tools pull-right">
                        <span className="label label-primary">填写信息</span>
                    </div>
                </div>
                <div className="box-body">

                    <table className="table">
                        <caption>
                            新货信息(填写完信息后，添加图片点击Upload即可)
                        </caption>
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>信息</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <h4>
                                        <span className="label label-primary">商品名称</span>
                                    </h4>
                                </td>
                                <td>
                                    <div className="form-group">

                                        <input
                                            type="text"
                                            className="form-control"
                                            id="stage-goods-name"
                                            name="GoodsName"
                                            placeholder="请输入名称"/>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h4>
                                        <span className="label label-primary">商品分类</span>
                                    </h4>
                                </td>
                                <td>
                                    <div className="form-group">

                                        <select id="stage-category" className="form-control">
                                            <option>男士</option>
                                            <option>女士</option>
                                            <option>儿童</option>
                                        </select>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h4>
                                        <span className="label label-primary">商品价格</span>
                                    </h4>
                                </td>
                                <td>
                                    <div className="form-group">
                                        <input
                                            type="text"
                                            className="form-control"
                                            id="stage-price"
                                            name="Price"
                                            placeholder="请输入价格"/>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h4>
                                        <span className="label label-primary">商品库存</span>
                                    </h4>
                                </td>
                                <td>
                                    <div className="form-group">

                                        <input
                                            type="text"
                                            className="form-control"
                                            id="stage-stock"
                                            name="Stock"
                                            placeholder="请输入库存"/>

                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h4>
                                        <span className="label label-primary">商品细节</span>
                                    </h4>
                                </td>
                                <td>
                                    <div className="form-group">
                                        <label htmlFor="name">添加细节</label>
                                        <textarea className="form-control" id="stage-details" name="Details" rows="3"></textarea>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h4>
                                        <span className="label label-primary">商品描述</span>
                                    </h4>
                                </td>
                                <td>
                                    <div className="form-group">
                                        <label htmlFor="name">添加描述</label>
                                        <textarea className="form-control" id="stage-describe" name="Describe" rows="3"></textarea>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
                <div className="box-footer">
                    <h3>
                        <span
                            className="label label-info"
                            id="add-img"
                            data-toggle="modal"
                            data-target="#myModal">添加商品图片</span>
                    </h3>

                    <div
                        className="modal fade"
                        id="myModal"
                        tabIndex="-1"
                        role="dialog"
                        aria-labelledby="myModalLabel"
                        aria-hidden="true">
                        <div
                            className="modal-dialog"
                            style={{
                            width: '80%'
                        }}>
                            <div className="modal-content">
                                <div className="modal-header">
                                    <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h5 className="modal-title" id="myModalLabel">添加商品图片</h5>
                                </div>
                                <div className="modal-body">
                                    <div className="htmleaf-container">
                                        <div className="container">
                                            <div className="row">
                                                <div className="col-md-12">
                                                    <input type="file" multiple id="ssi-upload"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="modal-footer">
                                    <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    }
});
module.exports = InNewStocks;